<script>
    import {mapState} from "vuex";

    export default {
        name: 'CommonHeader',
        data() {
            return {}
        },
        methods: {
            handlerMenu() {
                this.$store.commit('collapseMenu')
            }
        },
        computed: {
            ...mapState({
                tags: state => state.tab.tabsList
            })
        },
    }
</script>

<template>
    <div class="header-container">
        <div class="l-content">
            <el-button style="margin-right: 20px;" icon="el-icon-menu" size="mini" @click="handlerMenu"></el-button>
            <!--面包屑-->
            <el-breadcrumb separator="/" >
                <el-breadcrumb-item :to="{ path: item.path }" v-for="item in tags" :key="item.path">{{ item.label }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img src="../assets/images/user.png" class="user">
                 </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<style scoped lang="less">
    .header-container {
        height: 60px;
        background-color: #333333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        .text {
            color: #ffffff;
            font-size: 14px;
            margin-left: 10px;
        }

        .r-content {
            .user {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }

        .l-content {
            display: flex;
            align-items: center;

            /deep/.el-breadcrumb__item {
                .el-breadcrumb__inner {
                    font-weight: normal;
                    &.is-link {
                        color: #666666;
                    }
                }
                &:last-child {
                    .el-breadcrumb__inner {
                        color: #ffffff;
                    }
                }
            }
        }
    }
</style>